<template>
  <div class="carry">
    <v-navbar></v-navbar>
    <div class="carry-wrapper" ref="carry">
      <div>
        <head-icon :className="className" :price="price" :text="text"></head-icon>
        <div class="content">
          <div class="content-item">
            <div class="text">请选择提现资产</div>
            <div class="sum">
              <RadioGroup v-model="single">
                <Radio v-for="(v,i) in Radio" :key="i" :value='v.value' :label='v.label'/>
              </RadioGroup>
            </div>
          </div>
          <div class="content-item" @click="_shiftCard">
            <div class="text">选择指定银行卡</div>
            <span class="text" v-show="bankNum !== ''">{{bankNum | getVal}}</span>
            <i class="right-icon"></i>
          </div>
          <div class="content-item">
            <div class="price">提现金额</div>
            <input class="text" type="text" v-model="money" placeholder="必须为100的整数倍">
          </div>
          <div class="money">
            <div class="title">
              <i class="icon"></i>
              <span class="text">其它金额</span>
            </div>
            <div class="cost">
              <span class="text">手续费</span>
              <span>￥{{fee.fee}}</span>
            </div>
            <div class="cost">
              <span class="text">实时到账</span>
              <span class="current">￥{{fee.realMoney}}</span>
            </div>
          </div>
          <div @click="_sendCarry">
            <v-button :text="buttonText"></v-button>
          </div>
        </div>
      </div>
    </div>
    <div class="bank" v-show="show">
      <card :show="cardShow" @bank="_getBankId"></card>
    </div>
    <c-pwd-box v-if="doTransfer" @closepwdbox='closepwdbox' :carryData="carryData"></c-pwd-box>
  </div>
</template>

<script>
  import navbar from '@c/navbar/navbar'
  import headIcon from '@c/headIcon/headIcon'
  import Button from '@c/button/button'
  import Card from '@p/card/card'
  import CPwdBox from './CPwdBox'
  import { mapState, mapMutations } from 'vuex'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
  import { tokenPost, jtpost, gtpost, tokenLink, jtget } from '@api/axiosByToken'

  const BALANCE = '余额'
  const INREGEAL = '积分'
  export default {
    name: 'Carry',
    data() {
      return {
        className: 'carry',
        price: this.$store.state.balance,
        text: '当前余额',
        buttonText: '提交',
        single: '余额',
        Radio: [
          {
            value: 1,
            label: BALANCE,
          }
        ],
        show: false, //选择指定银行卡
        cardShow: false,
        bankId: '',//银行卡id
        doTransfer: false,//密码
        money: '',
        carryData: {},
        fee: {
          fee: 0,
          realMoney: 0,
        }, //手续费
        bankNum: '',//银行卡号
      }
    },
    components: {
      'v-navbar': navbar,
      'head-icon': headIcon,
      'v-button': Button,
      Card,
      CPwdBox,
    },
    computed: {
      ...mapState(['wtitle', 'rback', 'signed']),
      _getRadioType() {
        if (this.single === BALANCE) {
          return 1
        } else if (this.single === INREGEAL) {
          return 0
        } else {
          return ''
        }
      },
    },
    methods: {
      ...mapMutations(['WTITLE', 'RBACK', 'USERSINGED']),
      // 选择银行卡
      _shiftCard() {
        this.show = true
      },
      // 获得银行卡Id
      _getBankId(info) {
        this.show = false
        this.bankId = info.id
        this.bankNum = info.num
      },
      // 关闭密码框
      closepwdbox(a) {
        this.doTransfer = a
      },
      // 提现
      _sendCarry() {
        this._sendCarryCheck()
      },
      // 提交之前验证
      _sendCarryCheck() {
        let sendData = {
          userId: window.localStorage.userId,
          // type: this._getRadioType,
          bankId: this.bankId,
          money: this.money,
        }

        // if (sendData.type === '') {
        //   this.$Message.warning('请选择转账资产')
        //   return
        // }
        if (sendData.bankId === '') {
          this.$Message.warning('请选择银行卡')
          return
        }
        if (sendData.money === '') {
          this.$Message.warning('请输入转账金额')
          return
        }

        this.carryData = sendData
        if (window.localStorage.getItem('tradPassword') == 'false') {
          this.$router.push('/setPay')
          return
        }
        this.doTransfer = true
      },
      // 发送金额
      _getFee() {
        let money = {
          money: this.money,
          type: this._getRadioType,
        }
        tokenPost(tokenLink.fee, money).then(re => {
          if (re.status === 0) {
            this.fee = re.data
          }
        })
      },
    },
    created() {
      this.WTITLE('提现')
      this.RBACK(true)
    },
    watch: {
      // 监听金额改变
      'money'() {
        if (this.money === '') {
          this.fee.fee = 0
          this.fee.realMoney = 0
          return
        } else {
          this._getFee()
        }
      },
      'single'() {
        if (this.money === '') {
          this.fee.fee = 0
          this.fee.realMoney = 0
          return
        } else {
          this._getFee()
        }
      },
    },
    filters: {
      // 过滤银行卡后四位
      'getVal'(val) {
        let str = '**** **** **** ' + val.substr(val.length - 4)
        return str
      },
    },
  }
</script>
